import styles from './index.css'
import { Icon } from 'antd';

const HotQuestions = (props) => {
  return (
    <div>
      {
        props.hotQuestion.map((item, index) => {
          return (
            <div key={index} className={['clearfix', styles.questionBox].join(' ')} onMouseEnter={() => props.getTrend(item.qaId)}>
              <div className={index > 2 ? styles.afterNum : styles.topNum}>{index + 1}</div>
              <div className={styles.questionTitle} title={item.question}>{item.question}</div>
              <div className={styles.questionType}>{item.type}</div>
              <div className={styles.questionNum}>
                {item.totalCount}
                {
                  item.sort > 0 ? <Icon type="arrow-up" className={styles.upIcon} /> :
                    item.sort < 0 ?
                      <Icon type="arrow-down" className={styles.downIcon} />
                      : <Icon type="arrow-minus" className={styles.downIcon} />
                }
              </div>
            </div>
          )
        })
      }
    </div>
  )
}

export default HotQuestions;
